<template>
	<view class="login-container">
		<!-- 顶部logo区域 -->
		<view class="logo-section">
			<image class="logo" src="/static/logo.png" mode="aspectFit"></image>
			<text class="app-name">美天送餐</text>
		</view>

		<!-- 登录表单 -->
		<view class="form-section">
			<view class="form-item">
				<u-input 
					v-model="loginForm.userTel" 
					type="number" 
					placeholder="请输入手机号"
					prefix-icon="phone"
					:border="true"
					maxlength="11"
				></u-input>
			</view>
			
			<view class="form-item">
				<u-input 
					v-model="loginForm.userPassword" 
					type="password" 
					placeholder="请输入密码"
					prefix-icon="lock"
					:border="true"
					:password-icon="true"
				></u-input>
			</view>

			<view class="login-actions">
				<text class="forgot-password" @click="forgotPassword">忘记密码？</text>
			</view>

			<view class="button-section">
				<u-button 
					type="primary" 
					:loading="loading"
					@click="handleLogin"
					:disabled="!canLogin"
					size="large"
				>
					{{ loading ? '登录中...' : '登录' }}
				</u-button>
			</view>

			<view class="register-section">
				<text class="register-text">还没有账号？</text>
				<text class="register-link" @click="goToRegister">立即注册</text>
			</view>
		</view>
	</view>
</template>

<script>
import { login } from '@/utils/auth.js'

export default {
	data() {
		return {
			loginForm: {
				userTel: '',
				userPassword: ''
			},
			loading: false
		}
	},
	computed: {
		canLogin() {
			return this.loginForm.userTel.length === 11 && this.loginForm.userPassword.length >= 6
		}
	},
	methods: {
		// 处理登录
		async handleLogin() {
			if (!this.validateForm()) {
				return
			}

			this.loading = true
			try {
				const result = await login(this.loginForm)
				if (result.code === 200) {
					uni.showToast({
						title: '登录成功',
						icon: 'success'
					})
					
					// 登录成功后跳转到首页
					setTimeout(() => {
						uni.switchTab({
							url: '/pages/index/index'
						})
					}, 1500)
				} else {
					uni.showToast({
						title: result.msg || '登录失败',
						icon: 'none'
					})
				}
			} catch (error) {
				console.error('登录失败:', error)
				uni.showToast({
					title: '登录失败，请重试',
					icon: 'none'
				})
			} finally {
				this.loading = false
			}
		},

		// 表单验证
		validateForm() {
			if (!this.loginForm.userTel) {
				uni.showToast({
					title: '请输入手机号',
					icon: 'none'
				})
				return false
			}

			if (!/^1[3-9]\d{9}$/.test(this.loginForm.userTel)) {
				uni.showToast({
					title: '手机号格式不正确',
					icon: 'none'
				})
				return false
			}

			if (!this.loginForm.userPassword) {
				uni.showToast({
					title: '请输入密码',
					icon: 'none'
				})
				return false
			}

			if (this.loginForm.userPassword.length < 6) {
				uni.showToast({
					title: '密码至少6位',
					icon: 'none'
				})
				return false
			}

			return true
		},

		// 忘记密码
		forgotPassword() {
			uni.showToast({
				title: '请联系客服重置密码',
				icon: 'none'
			})
		},

		// 跳转注册页面
		goToRegister() {
			uni.navigateTo({
				url: '/pages/register/register'
			})
		}
	}
}
</script>

<style lang="scss" scoped>
.login-container {
	min-height: 100vh;
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	padding: 0 40rpx;
	display: flex;
	flex-direction: column;
}

.logo-section {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	margin-top: 100rpx;
	
	.logo {
		width: 120rpx;
		height: 120rpx;
		margin-bottom: 20rpx;
	}
	
	.app-name {
		font-size: 36rpx;
		font-weight: bold;
		color: white;
	}
}

.form-section {
	flex: 2;
	background: white;
	border-radius: 20rpx;
	padding: 60rpx 40rpx;
	margin: 60rpx 0 100rpx 0;
	box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.1);
}

.form-item {
	margin-bottom: 40rpx;
}

.login-actions {
	display: flex;
	justify-content: flex-end;
	margin-bottom: 60rpx;
	
	.forgot-password {
		color: #007AFF;
		font-size: 28rpx;
	}
}

.button-section {
	margin-bottom: 40rpx;
}

.register-section {
	text-align: center;
	
	.register-text {
		color: #666;
		font-size: 28rpx;
		margin-right: 10rpx;
	}
	
	.register-link {
		color: #007AFF;
		font-size: 28rpx;
		font-weight: bold;
	}
}
</style>
